<template>
  <div class="statistics-content">
    <div class="statistics-block industry-block">
      <RankList2 :rank="jobDemand"></RankList2>
    </div>
    <div class="statistics-block industry-block">
      <RankList2 :rank="demandGapRank" ></RankList2>
    </div>
    <div class="statistics-block industry-block">
      <BlockItem style="padding-top: 10px" class="max" title="各乡镇、街道就业排行"></BlockItem>
<!--      <div id="industry-labor" class="chart"></div>-->
      <div class="info-item">
<!--        <div class="scroll_parent_box" @mouseenter="mEnter" @mouseleave="mLeave">-->
<!--          <div class="scroll_list" :style="{ transform: `translate(0px,-${scrollTop}px)` }">-->
            <div class="info-list" v-for="(item,index) in list" :key="item.id" id="scrollItemBox">
              <div style="display: flex;align-items: center;">
                <div class="sort">0{{index+1}}</div>
                <div class="name">{{item.areaName}}</div>
                <div class="number">{{item.number}}人</div>
              </div>
            </div>
            <div v-html="copyHtml"></div>
          </div>
        </div>
<!--      </div>-->
<!--    </div>-->
    <div class="statistics-block2">
      <BlockItem style="padding: 10px 20px" class="max" title="各乡镇、街道就业人数分布"></BlockItem>
      <div class="chart" id="chart3"></div>
    </div>
  </div>
</template>

<script>
import RankList2 from "@/components/RankList/RankList-2";
import BlockItem from "@/components/BlockItem/BlockItem.vue";
import {getdemandCountApi, getSupplyAndDemandIndustries, getSupplyCount} from "@/api/statistics-2";
import {getNum} from "@/utils/utils";
export default {
  name: "Statistics2",
  components: {RankList2,BlockItem},
  data(){
    return{
      jobDemand:{
        title:'就业行业统计',
        type:1,
        data:[{
          name:"加工制作",
          value:1027
        },
          {
            name:"种植",
            value:987
          },
          {
            name:"养殖",
            value:892
          },
          {
            name:"餐饮",
            value:798
          },
          {
            name:"服务业",
            value:751
          },
          {
            name:"建筑业",
            value:682
          },
          {
            name:"销售",
            value:651
          },
          {
            name:"农业",
            value:605
          },
          {
            name:"金融",
            value:569
          }]
      },
      demandGapRank:{
        title:'就业企业统计',
        type:2,
        data:[
          {id:1,name:'合作社',value:1584,change:''},
          {id:2,name:'乡村就业工厂',value:1241,change:''},
          {id:3,name:'个体户',value:854,change:'icon-jiantoushangsheng'},
          {id:4,name:'民营企业',value:568,change:''},
          {id:5,name:'国有企业',value:361,change:'icon-jiantouxiajiang'},
          {id:6,name:'公益岗位',value:261,change:''}
        ],
      },
      list:[{
        id:1,
        areaName:'宁远镇',
        number:1636,
      },{
        id:2,
        areaName:'巉口镇',
        number:1436,
      },{
        id:3,
        areaName:'杏园乡',
        number:1236,
      },{
        id:4,
        areaName:'高峰乡',
        number:936,
      },{
        id:5,
        areaName:'白碌乡',
        number:636,
      },{
        id:6,
        areaName:'福台路街道',
        number:536,
      },
        {
          id:7,
          areaName:'李家堡镇',
          number:506,
        },{
          id:8,
          areaName:'风翔镇',
          number:486,
         },
        // {
        //   id:9,
        //   areaName:'团结镇',
        //   number:461,
        // },{
        //   id:10,
        //   areaName:'石峡湾乡',
        //   number:428,
        // },
          ],
     // copyHtml:'', //复制多一份防止滚动到后面出现空白
     // scrollTop: 0, //列表滚动高度    }
    }
  },
  methods: {
    // initScroll() {
    //   this.$nextTick(() => {
    //     this.startScroll()
    //   })
    // },
    // // 鼠标移入停止滚动
    // mEnter() {
    //   clearInterval(this.timer);
    // },
    // // 鼠标移出继续滚动
    // mLeave() {
    //   this.startScroll()
    // },
    // // 开始滚动
    // startScroll() {
    //   this.timer = setInterval(this.scroll, 35);
    // },
    // // 滚动处理方法
    // scroll() {
    //   this.scrollTop++
    //   // 获取需要滚动的盒子的高度
    //   let scrollItemBox = document.getElementById("scrollItemBox").offsetHeight
    //   // 当判断滚动的高度大于等于盒子高度时，从头开始滚动
    //   if (this.scrollTop >= scrollItemBox) {
    //     this.scrollTop = 0
    //   }
    // },
    getCount(){
      getSupplyCount().then((res)=>{
        if(res.code===200){
          this.jobDemand.data=res.data
        }
      })
    },
    getdemandCount(){
      getdemandCountApi().then((res)=>{
        if(res.code===200){
          this.demandGapRank.data=res.data
        }
      })
    },
    initChart3(){
      let myCharts = this.$echarts.init(document.getElementById('chart3'));
      let option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid:{
          top:30,
          left:60,
          right:10,
          bottom:90
        },
        legend: {
          data: ['行业供给数','行业需求数'],
          right:10,
          top:0,
          itemWidth: 10,
          itemHeight: 10,
          textStyle:{
            color:'#fff'
          }
        },
        xAxis: {
          data: ['中华路街道','永定路街道','福台路街道','风翔镇','内官营镇','巉口镇','称钩驿镇','鲁家沟镇','西巩驿镇','宁远镇','李家堡镇','团结镇','香泉镇','符家川镇','葛家岔镇','白碌乡','石峡湾乡','新集乡','青岚山乡','高峰乡','石泉乡','杏园乡'],
          axisLabel: {
           // rotate:30,
            textStyle: {
              color: '#fff',
              fontSize: '11'
            },
            interval: 0,
            formatter: function (value) {
              var ret = '';
              var maxLength = 4;
              var valLength = value.length;
              var rowN = Math.ceil(valLength / maxLength);
              if (rowN > 1) {
                for (var i = 0; i < rowN; i++) {
                  var temp = '';
                  var start = i * maxLength;
                  var end = start + maxLength;
                  temp = value.substring(start, end) + '\n';
                  ret += temp;
                }
                return ret;
              } else {
                return value;
              }
            }
          },
          axisTick: {
            //x轴刻度相关设置
            alignWithLabel: true,
          },
        },
        yAxis: {
         // minInterval:1000,
          min:0,
          nameTextStyle:{
            color:'#fff',
            fontSize:14
          },
          splitLine: {//分割线配置
            show:true,
            lineStyle: {
              color: "rgba(255,255,255,.1)",
            }
          },
          axisLabel: {
            textStyle: {
              color: '#fff',
            }
          }
        },
        series: [
          {
            type: 'bar',
            //data: [134, 242, 245, 365, 456, 735, 435, 354, 4, 42, 654, 527, 42, 52, 400, 575, 348, 24, 43, 421],
            data:getNum(22,500,80),
            label: {
              show: true,
              position: 'top',
              color:'#fff'
            },
            barWidth: 10,
            barCategoryGap: '30%',
            barGap:'180%',
            itemStyle: {
              normal: {
                barBorderRadius:[15, 15, 15, 15],
                color:new this.$echarts.graphic.LinearGradient(0,1,0,0,[{
                  offset:0,
                  color:'#46E6A2'
                },{
                  offset:1,
                  color:'#F4F783'
                }])
              }
            }
          },
        ]
      };
      // getSupplyAndDemandIndustries().then((res)=>{
      //   if(res.code===200){
      //     const data=res.data
      //     option.xAxis.data=data.strings;
      //     option.series[0].data=data.arr2;
      //     option.series[1].data=data.arr;
          myCharts.hideLoading();
          myCharts.setOption(option)
        // }
      // })
    },
    initLabor(){
      let charts = this.$echarts.init(document.getElementById('industry-labor'));
      charts.showLoading({
        text:'加载中',
        textColor:'#fff',
        maskColor:'rgba(0,0,0,0)'
      })
      let option = {
        color:['#fac858','#42efa7','#5961f9'],
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: '占比',
            type: 'pie',
            radius: ['0%', '50%'],
            center: ['50%', '40%'],
            itemStyle: {
              borderRadius: 1,
              normal:{
                label:{
                  color:'#fff',
                  formatter:'{b} \n({d}%)',
                  fontSize:14
                }
              }
            },
            data: [
              {value: 3.33, name: '农业'},
              {value: 21.67, name: '制造业'},
              {value: 75, name: '服务业'},
            ]
          }
        ]
      }
      charts.hideLoading();
      charts.setOption(option)
    },

  },
  mounted() {
    // this.getCount()
    // this.getdemandCount()
    //this.initLabor()
    this.initChart3()
   // this.initScroll()
  }
}
</script>

<style lang="scss" scoped>
$boxshadow: inset 0px 0px 20px 0px rgba(70, 169, 255, 0.75);
$border: 1px solid #46a9ff;
.statistics-content{
  width:calc(100% - 70px);
  margin: 0 auto;
  margin-top: 30px;
  height: calc(100% - 152px);

  .chart {
    width: 100%;
    height: 100%;
  }
  .corner {
    position: absolute;
    width: 15px;
    height: 15px;
  }

  .corner.upper-left {
    background: url("/static/upper-left.png") no-repeat center;
    background-size: 100%;
    left: -2px;
    top: -2px;
  }

  .corner.upper-right {
    background: url("/static/upper-right.png") no-repeat center;
    background-size: 100%;
    top: -2px;
    right: -2px;
  }

  .corner.low-right {
    background: url("/static/low-right.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    right: -2px;
  }

  .corner.left-lower {
    background: url("/static/left-lower.png") no-repeat center;
    background-size: 100%;
    bottom: -2px;
    left: -2px;
  }
  .statistics-block{
    padding: 10px;

  }
}
.statistics-content {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;

  .statistics-block {
    background-color: #0A1456;
    height: calc(60% - 5px);
    width: calc((100% - 40px) / 6 * 2);
    position: relative;
    border: 2px solid #05548A;
    margin-right: 20px;
    border-radius: 10px;
    .info-item{
      height: calc(100% - 40px);
      display: flex;
      flex-direction: column;
      // overflow: hidden;
      .info-list{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #025A8B;
        margin-bottom: 12px;
        height: 36px;
        .sort{
          color: #ffffff;
          margin-left: 10px;
          font-size: 16px;
          width: 55px;
          height: 34px;
          background: url("/static/u6817.png");
          background-size: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .name{
          color: #ffffff;
          font-size: 15px;
          width: 200px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .number{
          color: #ffffff;
          font-size: 15px;
          width: 130px;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  .statistics-block2 {
    background-color: #0A1456;
    width: 100%;
    height: calc(40% - 30px);
    border: 2px solid #05548A;
    border-radius: 10px;
    .chart{
      height: calc(100% - 20px);
    }
  }
  .statistics-block.pie{
    width: calc((100% - 40px) / 6*1.5);
  }

  .statistics-block:nth-child(3n){
    margin-right: 0;
  }
  .statistics-block.full {
    width: calc((100% - 40px) / 6 * 2.5);
  }
}
</style>
<style lang="scss" scoped>


.scroll_parent_box {
  height: 380px;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 10px;
}

.scroll_list {
  overflow: hidden;
  transition: all 0ms ease-in 0s
}

.scroll_item {
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 14px;
}
</style>
